<template>
  <div class="portfolio">
    <h2>作品展示</h2>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" v-for="(item, index) in projects" :key="index">
        <el-card :body-style="{ padding: '0px' }" class="project-card">
          <img :src="item.image" class="image">
          <div style="padding: 14px;">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
            <el-button type="text">查看详情</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Portfolio',
  data() {
    return {
      projects: [
        {
          title: '项目 1',
          description: '项目描述...',
          image: 'project1.jpg'
        },
        {
          title: '项目 2',
          description: '项目描述...',
          image: 'project2.jpg'
        },
        {
          title: '项目 3',
          description: '项目描述...',
          image: 'project3.jpg'
        }
      ]
    }
  }
}
</script>

<style scoped>
.portfolio {
  padding: 20px;
}

.project-card {
  margin-bottom: 20px;
}

.image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
</style> 